<template>
  <el-tabs type="border-card">
    <el-tab-pane :label="$t('collectionManagement.management.personnelManagement')">
      <personnel-management
        :all-firm="allFirm"
        :all-group="allGroup"
        :group-select="groupSelect"
        :all-stage="allStage"
      />
    </el-tab-pane>
    <el-tab-pane :label="$t('collectionManagement.management.groupManagement')">
      <group-management
        :all-firm="allFirm"
        :firm-data="firmData"
        :all-group="allGroup"
        :group-select="groupSelect"
        :all-stage="allStage"
        :stage-data="stageData"
        @get-all-group="getAllGroup"
      />
    </el-tab-pane>
    <el-tab-pane :label="$t('collectionManagement.management.companyManagement')">
      <company-management
        @get-all-firm="getAllFirm"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { getAllOverdueFirm, getAllOverdueGroup, getBusinessConfig } from '@/api/collection'
import personnelManagement from './personnel-management'
import GroupManagement from './group-management'
import CompanyManagement from './company-management'
export default {
  name: 'MemberManagement',
  components: {
    personnelManagement,
    GroupManagement,
    CompanyManagement
  },
  data() {
    return {
      allFirm: [],
      firmData: [],
      allGroup: [],
      allStage: [],
      stageData: [],
      groupSelect: []
    }
  },
  mounted() {
    this.getAllFirm()
    this.getAllStage()
    setTimeout(() => {
      this.getAllGroup()
    }, 10)
  },
  methods: {
    getAllFirm() {
      getAllOverdueFirm()
        .then(res => {
          if (res.success) {
            this.firmData = res.data
            this.allFirm = res.data
            const obj = [{
              firmName: this.$t('common.all'),
              id: ''
            }]
            this.allFirm = obj.concat(this.allFirm)
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    getAllGroup() {
      getAllOverdueGroup()
        .then(res => {
          if (res.success) {
            this.allGroup = res.data
            const arr = []
            res.data.map(item => {
              if (!arr.includes(item['firmId'])) {
                arr.push(item['firmId'])
              }
            })
            const group = []
            if (arr.length > 0) {
              arr.forEach(v => {
                const options = []
                const a = res.data.filter(item => {
                  return item['firmId'] === v
                })
                a.forEach(item => {
                  options.push(
                    {
                      label: item['groupName'],
                      value: item['id']
                    }
                  )
                })
                const name = this.allFirm.filter(aa => {
                  return aa['id'] === v
                })
                const firmName = name && name[0] && name[0]['firmName'] ? name[0]['firmName'] : 0
                group.push({
                  label: firmName,
                  value: firmName,
                  options
                })
              })
            }
            this.groupSelect = group
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    getAllStage() {
      const data = {
        isPage: false
      }
      getBusinessConfig(data)
        .then(res => {
          if (res.success) {
            this.stageData = res.data.filter(item => {
              return item['state'] === 'ACTIVATE'
            })
            this.allStage = res.data.filter(item => {
              return item['state'] === 'ACTIVATE'
            })
            const obj = [{
              phaseName: this.$t('common.all'),
              id: ''
            }]
            this.allStage = obj.concat(this.allStage)
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
  margin: 10px;
}
</style>
